<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="static/css/main1.css" />
  <link rel="stylesheet" type="text/css" href="static/css/animate.css" />
  <link rel="stylesheet" type="text/css" href="static/css/flex.css" />
  <link rel="stylesheet" type="text/css" href="static/css/teamWork.css" />
  <link rel="stylesheet" type="text/css" href="static/fonts/iconfont.css">
  <script src="static/3rd/jquery-3.2.1.min.js"></script>
  <script src="static/3rd/ScrollText.js"></script>
  <!--<script src="static/3rd/jquery.nicescroll.js"></script>-->
  <script src="static/3rd/jquery.backstretch.min.js"></script>
  <style type="text/css">
    .mapBarTab{
      overflow: hidden;
      position: absolute;
      right: 20px;
      top:20px;
      cursor: pointer;
      z-index: 9999;
    }

    .mapBarTab>li{
      float: left;
      padding: 5px 15px;
      background: #2853b7;
      margin-left: 5px;
      cursor: pointer;
    }

    .mapBarTab>li.active{
      background: #183dc2;
      color: #fff;
    }
  </style>
</head>

<body style="background: #040f15;">
  <img class="bgImg" src="" alt="" />
  <div class="con-box flex-d-col">
    <div class="header">
				<div class="logo">协同管理</div>
		</div>
    <div class="teamWork flex-1 flex-layout">
      <div class="left-chart flex-d-col mr-10">
        <div class="boxBg flex-1 mb-10 flex-d-col">
          <div class="box-title">
            <i class="icon iconfont icon-tongji6"></i>指令紧急程度分布
          </div>
          <div class="flex-1" id="pieChart"></div>
        </div>
        <div class="boxBg flex-1 mb-10 flex-d-col">
          <div class="box-title">
            <i class="icon iconfont icon-tongji6"></i>指令情况分布
          </div>
          <div class="flex-1" id="barChart">
          </div>
        </div>
        <div class="boxBg flex-1 flex-d-col">
          <div class="box-title">
            <i class="icon iconfont icon-tongji6"></i>协同指令趋势统计
          </div>
          <div class="flex-1" id="lineChart">
          </div>
        </div>
      </div>
      <div class="flex-3 boxBg mr-10">
      	<ul class="mapBarTab" style="left: 20px;">
      		<li class="active">全省</li>
      		<li>全国</li>
      	</ul>
        <div class="map-chart" id="mapChart"></div>
      </div>
      <div class="flex-2 flex-d-col">
        <div class="flex-1 flex-d-col mb-10 boxBg">
          <div class="box-title">
            <i class="icon iconfont icon-tongji6"></i>部省协同指令
          </div>
          <div class="flex-1 flex-d-col box-table">
            <table class="ui-table flex-1 flex-d-col">
              <thead class="tab_heard">
                <tr>
                  <th width="60">序号</th>
                  <th>紧急程度</th>
                  <th>接收时间</th>
                  <th>执行状况</th>
                </tr>
              </thead>
              <tbody id="tread1" class="tab_content tbodyHeight">
              </tbody>
            </table>
          </div>
        </div>
        <div class="flex-1 flex-d-col mb-10 boxBg">
          <div class="box-title">
            <i class="icon iconfont icon-tongji6"></i>省际协同指令
          </div>
          <div class="flex-1 flex-d-col box-table">
            <table class="ui-table flex-1 flex-d-col">
              <thead class="tab_heard">
                <tr>
                  <th width="60">序号</th>
                  <th>紧急程度</th>
                  <th>接收时间</th>
                  <th>执行状况</th>
                </tr>
              </thead>
              <tbody id="tread2" class="tab_content tbodyHeight"></tbody>
            </table>
          </div>
        </div>
        <div class="flex-1 flex-d-col boxBg">
          <div class="box-title">
            <i class="icon iconfont icon-tongji6"></i>政企协同指令
          </div>
          <div class="flex-1 flex-d-col box-table">
            <table class="ui-table flex-1 flex-d-col">
              <thead class="tab_heard">
                <tr>
                  <th width="60">序号</th>
                  <th>紧急程度</th>
                  <th>接收时间</th>
                  <th>执行状况</th>
                </tr>
              </thead>
              <tbody id="tread3" class="tab_content tbodyHeight"></tbody>
            </table>
          </div>
        </div>
      </div>


    </div>
  </div>
  <!--<div class="foot">
    <a href="新闻类.html" class="next_btn"></a>
  </div>-->
  </div>
  <!-- <div class="foot_right_logo"></div> -->

  <script src="static/echarts/echarts.min.js"></script>
  <script src="static/echarts/js-base/shanghai.js"></script>
  <script src="static/echarts/china.js"></script>
  <script src="static/js/teamWork.js"></script>
  <script src="static/js/menuShow.js"></script>
		<script src="static/js/boxBg.js"></script>
  <script>
    $(".ec_tab li").click(function () {
      $(this).addClass("active").siblings().removeClass("active")
    })
  </script>

  <script>
    var n = 0;
    $(".tabType li").click(function () {
      $(this).addClass('active').siblings().removeClass()
      n = $(this).index();
      $(this).parent('ul').siblings('.tab_classify_content').children('div').eq(n).show().siblings().hide();
    })
  </script>
  <script src="static/js/imgSkin.js"></script>
<script type="text/template" id="treadTpl">
    <tr>
      <td width="60"><%= index %></td>
      <td><%= emergencyDegree %></td>
      <td><%= receivingTime %></td>
      <td><%= status %></td>
    </tr>
  </script>
  <script type="text/javascript" src="static/js/lodash.js"></script>

<script>
  $(function () {
//  $(".teamWork .boxBg").append("<div class='boxLeftTop'></div><div class='boxLeftBottom'></div><div class='boxRightBottom'></div>")
    var tread1 = [
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
    ];
    var tread2 = [
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
    ];
    var tread3 = [
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
      {emergencyDegree:'重要紧急',receivingTime:'2018-8-15 12:14:12',status:'XXXXXXXXXX'},
    ];
    insertInfoTpl(tread1, $('#tread1'), $('#treadTpl'))
    insertInfoTpl(tread2, $('#tread2'), $('#treadTpl'))
    insertInfoTpl(tread3, $('#tread3'), $('#treadTpl'))
  });
  /**
   * [insertInfoTpl 插入 html信息]
   * @param  {[type]} data [渲染所需的数据]
   * @param  {[type]} dom  [加入页面中的哪个DOM节点]
   * @return {[type]}      [description]
   */
  function insertInfoTpl(data, dom, tpl) {
    var infoTpl = tpl.html()
    var compiled = _.template(infoTpl)
    var html = ''
    _.forEach(data, function (item, index) {
      item.index = index + 1
      // console.log(item, index)
      html += compiled(item)
    })
    dom.append($(html))
  }
</script>

</body>

</html>